/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

// ----------------------------------------------------------------------------
// Local Emoji Font
// ----------------------------------------------------------------------------
@font-face {
  font-family: emoji;
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Android Emoji'), local('Noto Color Emoji'),
    local('JoyPixels'), local('Twemoji');

  // Define a whitelist of glyphs to render with emoji font according to standard.
  // http://unicode.org/Public/emoji/12.1/emoji-data.txt
  //
  // This list is constructed as following:
  // 1. Download the list using the link above.
  // 2. Remove comments and everything after semicolor on every line.
  // 3. Sort and remove duplicate lines.
  // 4. Remove the following lines (they are better off rendered with a text font):
  //    - 0023        (#)
  //    - 002A        (*)
  //    - 0030..0039  (0-9)
  //    - 00A9        (©)
  //    - 00AE        (®)
  //    - 2122        (™)
  // 5. Replace all occurrences of `..` with `-`.
  // 6. Convert everything to lower case.
  // 7. Prepend each line with `U+`.
  // 8. Join all lines with comma.
  unicode-range: U+1f000-1f003, U+1f004, U+1f005-1f0ce, U+1f0cf, U+1f0d0-1f0ff, U+1f10d-1f10f, U+1f12f, U+1f16c-1f16f,
    U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f1ad-1f1e5, U+1f1e6-1f1ff, U+1f201, U+1f201-1f202,
    U+1f203-1f20f, U+1f21a, U+1f22f, U+1f232-1f236, U+1f232-1f23a, U+1f238-1f23a, U+1f23c-1f23f, U+1f249-1f24f,
    U+1f250-1f251, U+1f252-1f2ff, U+1f300-1f320, U+1f300-1f321, U+1f322-1f323, U+1f324-1f393, U+1f32d-1f335,
    U+1f337-1f37c, U+1f37e-1f393, U+1f385, U+1f394-1f395, U+1f396-1f397, U+1f398, U+1f399-1f39b, U+1f39c-1f39d,
    U+1f39e-1f3f0, U+1f3a0-1f3ca, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3cf-1f3d3, U+1f3e0-1f3f0, U+1f3f1-1f3f2,
    U+1f3f3-1f3f5, U+1f3f4, U+1f3f6, U+1f3f7-1f3fa, U+1f3f7-1f4fd, U+1f3f8-1f43e, U+1f3fb-1f3ff, U+1f400-1f4fd, U+1f440,
    U+1f442-1f443, U+1f442-1f4fc, U+1f446-1f450, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f485-1f487, U+1f48f, U+1f491,
    U+1f4aa, U+1f4fe, U+1f4ff-1f53d, U+1f546-1f548, U+1f549-1f54e, U+1f54b-1f54e, U+1f54f, U+1f550-1f567, U+1f568-1f56e,
    U+1f56f-1f570, U+1f571-1f572, U+1f573-1f579, U+1f574-1f575, U+1f57a, U+1f57b-1f586, U+1f587, U+1f588-1f589,
    U+1f58a-1f58d, U+1f58e-1f58f, U+1f590, U+1f591-1f594, U+1f595-1f596, U+1f597-1f5a3, U+1f5a4, U+1f5a5, U+1f5a6-1f5a7,
    U+1f5a8, U+1f5a9-1f5b0, U+1f5b1-1f5b2, U+1f5b3-1f5bb, U+1f5bc, U+1f5bd-1f5c1, U+1f5c2-1f5c4, U+1f5c5-1f5d0,
    U+1f5d1-1f5d3, U+1f5d4-1f5db, U+1f5dc-1f5de, U+1f5df-1f5e0, U+1f5e1, U+1f5e2, U+1f5e3, U+1f5e4-1f5e7, U+1f5e8,
    U+1f5e9-1f5ee, U+1f5ef, U+1f5f0-1f5f2, U+1f5f3, U+1f5f4-1f5f9, U+1f5fa-1f64f, U+1f5fb-1f64f, U+1f645-1f647,
    U+1f64b-1f64f, U+1f680-1f6c5, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6c6-1f6ca, U+1f6cb-1f6d0, U+1f6cc, U+1f6d0,
    U+1f6d1-1f6d2, U+1f6d3-1f6d4, U+1f6d5, U+1f6d6-1f6df, U+1f6e0-1f6e5, U+1f6e6-1f6e8, U+1f6e9, U+1f6ea, U+1f6eb-1f6ec,
    U+1f6ed-1f6ef, U+1f6f0, U+1f6f1-1f6f2, U+1f6f3, U+1f6f4-1f6f6, U+1f6f7-1f6f8, U+1f6f9, U+1f6fa, U+1f6fb-1f6ff,
    U+1f774-1f77f, U+1f7d5-1f7df, U+1f7e0-1f7eb, U+1f7ec-1f7ff, U+1f80c-1f80f, U+1f848-1f84f, U+1f85a-1f85f,
    U+1f888-1f88f, U+1f8ae-1f8ff, U+1f90c, U+1f90d-1f90f, U+1f90f, U+1f910-1f918, U+1f918, U+1f919-1f91e, U+1f91f,
    U+1f920-1f927, U+1f926, U+1f928-1f92f, U+1f930, U+1f931-1f932, U+1f933-1f939, U+1f933-1f93a, U+1f93c-1f93e, U+1f93f,
    U+1f940-1f945, U+1f947-1f94b, U+1f94c, U+1f94d-1f94f, U+1f950-1f95e, U+1f95f-1f96b, U+1f96c-1f970, U+1f971, U+1f972,
    U+1f973-1f976, U+1f977-1f979, U+1f97a, U+1f97b, U+1f97c-1f97f, U+1f980-1f984, U+1f985-1f991, U+1f992-1f997,
    U+1f998-1f9a2, U+1f9a3-1f9a4, U+1f9a5-1f9aa, U+1f9ab-1f9ad, U+1f9ae-1f9af, U+1f9b0-1f9b3, U+1f9b0-1f9b9,
    U+1f9b5-1f9b6, U+1f9b8-1f9b9, U+1f9ba-1f9bf, U+1f9bb, U+1f9c0, U+1f9c1-1f9c2, U+1f9c3-1f9ca, U+1f9cb-1f9cc,
    U+1f9cd-1f9cf, U+1f9d0-1f9e6, U+1f9d1-1f9dd, U+1f9e7-1f9ff, U+1fa00-1fa6f, U+1fa70-1fa73, U+1fa74-1fa77,
    U+1fa78-1fa7a, U+1fa7b-1fa7f, U+1fa80-1fa82, U+1fa83-1fa8f, U+1fa90-1fa95, U+1fa96-1fffd, U+200d, U+203c, U+2049,
    U+20e3, U+2139, U+2194-2199, U+21a9-21aa, U+231a-231b, U+2328, U+2388, U+23cf, U+23e9-23ec, U+23e9-23f3, U+23f0,
    U+23f3, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+25fd-25fe, U+2600-2604, U+2605, U+2607-260d,
    U+260e, U+260f-2610, U+2611, U+2612, U+2614-2615, U+2616-2617, U+2618, U+2619-261c, U+261d, U+261e-261f, U+2620,
    U+2621, U+2622-2623, U+2624-2625, U+2626, U+2627-2629, U+262a, U+262b-262d, U+262e-262f, U+2630-2637, U+2638-263a,
    U+263b-263f, U+2640, U+2641, U+2642, U+2643-2647, U+2648-2653, U+2654-265e, U+265f, U+2660, U+2661-2662, U+2663,
    U+2664, U+2665-2666, U+2667, U+2668, U+2669-267a, U+267b, U+267c-267d, U+267e, U+267f, U+2680-2685, U+2690-2691,
    U+2692-2694, U+2693, U+2695, U+2696-2697, U+2698, U+2699, U+269a, U+269b-269c, U+269d-269f, U+26a0-26a1, U+26a1,
    U+26a2-26a9, U+26aa-26ab, U+26ac-26af, U+26b0-26b1, U+26b2-26bc, U+26bd-26be, U+26bf-26c3, U+26c4-26c5, U+26c6-26c7,
    U+26c8, U+26c9-26cd, U+26ce, U+26ce-26cf, U+26d0, U+26d1, U+26d2, U+26d3-26d4, U+26d4, U+26d5-26e8, U+26e9-26ea,
    U+26ea, U+26eb-26ef, U+26f0-26f5, U+26f2-26f3, U+26f5, U+26f6, U+26f7-26fa, U+26f9, U+26fa, U+26fb-26fc, U+26fd,
    U+26fe-2701, U+2702, U+2703-2704, U+2705, U+2708-270d, U+270a-270b, U+270a-270d, U+270e, U+270f, U+2710-2711, U+2712,
    U+2714, U+2716, U+271d, U+2721, U+2728, U+2733-2734, U+2744, U+2747, U+274c, U+274e, U+2753-2755, U+2757,
    U+2763-2764, U+2765-2767, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b50, U+2b55,
    U+3030, U+303d, U+3297, U+3299, U+e0020-e007f, U+fe0f;
}

// ----------------------------------------------------------------------------
// Font
// ----------------------------------------------------------------------------
@ars-font-path: '../font/';

body {
  // Fonts
  --font-family-base: emoji, BlinkMacSystemFont, -apple-system, Helvetica Neue, Arial, sans-serif;
  --font-family-ephemeral: Redacted Script;

  --font-size-xxs: 0.5rem;
  --font-size-xsmall: 0.6875rem;
  --font-size-small: 0.75rem;
  --font-size-medium: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxl: 2rem;
  --font-size-xxxl: 3.5rem;

  --font-weight-light: 300;
  --font-weight-regular: 400; // font-weight-xs should this this
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-xs: 0.6875rem;
  --line-height-small: 0.75rem;
  --line-height-small-plus: 0.875rem;
  --line-height-sm: 1rem;
  --line-height-md: 1.25rem;
  --line-height-lg: 1.5rem;
  --line-height-xl: 2rem;
  --line-height-xxl: 4rem;

  // Icons
  --icon-size-sm: 1rem;
  --icon-size-md: 2rem;
  --icon-size-lg: 3.5rem;

  // Dot sizes
  --dot-md: 0.5rem;

  // Common Colors
  // use for seperator and icon surrounds on white background
  --separator-color: var(--foreground-fade-24);

  // Buttons
  --button-border-radius: 4px;
  --button-border-size: 1px;
  --button-height: 40px;
  --button-width: 192px;
  --button-medium-height: 32px;
  --button-medium-sm-height: 28px;
  --button-medium-width: 108px;
  --button-round-size: 28px;
  --button-round-size-xs: 28px;
  --button-round-size-sm: 32px;
  --button-round-size-md: 40px;
  --button-round-size-lg: 64px;
  --button-round-size-xl: 72px;

  // Framework
  --teams-width: 78px;
  --conversation-list-width: 320px;
  --right-width: 320px;
  --panel-content-min-height: 150px;
  --panel-width: 320px;
  --badge-height: 24px;

  --delivered-state-width: 56px;

  // Start UI
  --start-ui-search-bar-offset: 88px;

  // Margins
  --offscreen-left: -9999px;

  // Warnings
  --warning-bar-feature-height: 64px;
  --warning-bar-connection-height: 32px;

  --preferences-width: 560px;

  @media (max-width: 960px) {
    --preferences-width: 100%;
  }

  // Left list
  --left-list-header-height: 45px;
  --left-list-item-height: 48px;
  --left-list-item-left-width: 60px;
  --left-list-item-right-width: 56px;
  --left-list-controls-width: 104px;

  // Conversation
  --conversation-max-width: 100%;
  --conversation-message-max-width: 640px;
  --conversation-message-sender-width: 64px;
  --conversation-message-asset-width: 800px;
  // Images should be in the viewport regardless of the window's size
  // To ensure this, we calculate the maximum height as:
  // 100vh - TitleBar(45px) - ImagePadding(12px) - TypingIndicator(40px) - ClassifiedBar(1rem) - InputBar(56px)
  --conversation-message-image-asset-max-height: calc(100vh - 155px - 1rem);

  // Conversation Input
  --conversation-input-min-height: 56px;
  --conversation-input-max-height: 200px;
  --conversation-input-line-height: var(--line-height-lg);

  // Content Title Bar
  --content-title-bar-height: 46px;

  // Modal
  --modal-padding: 24px;

  // Avatar
  --avatar-diameter-xl: 200px;
  --avatar-initials-xl: var(--font-size-xxl);

  --avatar-diameter-l: 72px;
  --avatar-initials-l: var(--font-size-xlarge);

  --avatar-diameter-m: 40px;
  --avatar-initials-m: var(--font-size-base);

  --avatar-diameter-s: 28px;
  --avatar-initials-s: var(--font-size-xsmall);

  --avatar-diameter-xs: 24px;
  --avatar-initials-xs: var(--font-size-xsmall);

  --avatar-diameter-xxs: 20px;
  --avatar-initials-xxs: var(--font-size-xsmall);

  --avatar-diameter-xxxs: 16px;
  --avatar-initials-xxxs: var(--font-size-xxs);

  // Bubble
  --bubble-width: 306px;
  --bubble-height: 440px;

  // Media queries
  --screen-sm-min: 320px;
  --screen-sm: 480px;
  --screen-md-min: 768px;

  //Animations
  // for slower animation use n * slower
  --animation-timing-faster: 0.15s;
  --animation-timing-fast: 0.35s;
  --animation-timing-slow: 0.55s;
  --animation-timing-slower: 0.7s;

  // Easing functions
  --ease-in-quad: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-expo: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  // Collection
  --collection-image-size: 110px;
  --collection-images-per-row: 6;
  --collection-images-padding: 3px;
  --collection-max-section-width: 696px;

  // Scrollbar
  --scrollbar-size: 7px;

  // Media Button
  --media-button-size: 32px;
  --media-button-size-lg: 64px;

  // Link Preview
  --link-preview-height: 5.5rem;

  // Video
  --play-button-size: 32px;

  // Input Level
  --input-level-bullet-size: 16px;
  --input-level-bullet-size-sm: 12px;

  --z-index-level-0: 0;
  --z-index-level-1: 10;
  --z-index-level-2: 100;
  --z-index-level-3: 1000;
  --z-index-level-4: 10000;
  --z-index-level-5: 100000;
  --z-index-level-6: 1000000;
  --z-index-level-7: 10000000;

  --z-index-badge: var(--z-index-level-2);
  --z-index-panel: var(--z-index-level-3);
  --z-index-bubble: var(--z-index-level-3);
  --z-index-video: var(--z-index-level-4);
  --z-index-choosescreen: var(--z-index-level-5);
  --z-index-context: var(--z-index-level-5);
  --z-index-warnings: var(--z-index-level-6);
  --z-index-modal: var(--z-index-level-7);
}

// ----------------------------------------------------------------------------
// Z-Indexes
// ----------------------------------------------------------------------------
@z-index-level-0: 0;
@z-index-level-1: 10;
@z-index-level-2: 100;
@z-index-level-3: 1000;
@z-index-level-4: 10000;
@z-index-level-5: 100000;
@z-index-level-6: 1000000;
@z-index-level-7: 10000000;

@z-index-badge: @z-index-level-2;
@z-index-panel: @z-index-level-3;
@z-index-bubble: @z-index-level-3;
@z-index-video: @z-index-level-4;
@z-index-choosescreen: @z-index-level-5;
@z-index-context: @z-index-level-5;
@z-index-warnings: @z-index-level-6;
@z-index-modal: @z-index-level-7;
